<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>圈子</title>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../../css/appOther.css"/>
		<style>
		</style>
	</head>

	<body id='app'>
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#mine">
						我的圈子
					</a>
					<a class="mui-control-item" href="#all">
						全部圈子
					</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
					<div class="mui-search" style="display: none;">
						<input type="search" style="margin: 1px 0px;" class="mui-input-clear" placeholder="搜索感兴趣的圈子" >
					</div>
				<div class="mui-slider-group" style="top:40px">	<!--原本76px-->
					<div id="mine" class="mui-slider-item mui-control-content mui-active">
						<div id='wrapperMine' class="mui-scroll-wrapper">
							<div id='scrollMine' class="mui-scroll" data-type='mine'>
								<ul class="mui-table-view app-hide">
									<li v-for="circle in myCircles" @tap='goCircle(circle.ID)' class="mui-table-view-cell">	
										<div @tap="join(circle, $event)" class="mui-btn mui-btn-primary btn-follow" style="top: 40%;right: 80px;">{{circle.joinStatus==0?"加入":(circle.joinStatus==1?"审核中":"退出")}}</div>
										<div @tap="follow(circle, $event)" class="mui-btn mui-btn-primary btn-follow" style="top: 40%;">{{circle.followStatus==0?"关注":"不关注"}}</div>
										<img :src="circle.Ciravatar" class="mui-pull-left circle-img" style="width: auto;"/>
										<p class="text_main label-title">{{circle.Cirname}}</p>						
										<p class="text_main text_hid">{{circle.Descrip}}</p>										
										<p class="text_submain mui-clearfix" style="padding-top: 5px;">						
											<span class="card_label-fl ">成员：{{circle.Membernum}}</span>
											<span class="card_label-fr">话题：{{circle.Topicnum}}</span>
										</p>																
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="all" class="mui-slider-item mui-control-content">
						<div id='wrapperAll' class="mui-scroll-wrapper">
							<div id='scrollAll' class="mui-scroll" data-type='all'>
								<ul class="mui-table-view app-hide">
									<li v-for="circle in allCircles" @tap='goCircle(circle.ID)' class="mui-table-view-cell">	
										<div @tap="join(circle, $event)" class="mui-btn mui-btn-primary btn-follow" style="top: 40%;right: 80px;">{{circle.joinStatus==0?"加入":(circle.joinStatus==1?"审核中":"退出")}}</div>
										<div @tap="follow(circle, $event)" class="mui-btn mui-btn-primary btn-follow" style="top: 40%;">{{circle.followStatus==0?"关注":"不关注"}}</div>
										<img :src="circle.Ciravatar" class="mui-pull-left circle-img" style="width: auto;"/>
										<p class="text_main label-title">{{circle.Cirname}}</p>						
										<p class="text_main text_hid">{{circle.Descrip}}</p>										
										<p class="text_submain mui-clearfix" style="padding-top: 5px;">						
											<span class="card_label-fl ">成员：{{circle.Membernum}}</span>
											<span class="card_label-fr">话题：{{circle.Topicnum}}</span>
										</p>											
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui-extend.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.pullToRefresh.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.pullToRefresh.material.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8"> 
			var vm = new Vue({
				el:'#app',
				ready:function(){
					var me = this;
					$('#app .app-hide').show();
					mui.init();
					ui.fixScroll(0);
					this.scrollMine = ui.setPullToRefresh('#wrapperMine', '#scrollMine', this.getMine);
					this.scrollAll = ui.setPullToRefresh('#wrapperAll', '#scrollAll', this.getAll);
					document.addEventListener('show', function() {
						$.plusReady(function () {
							me.getMine(true);
							me.getAll(true);
						})
					});
					document.addEventListener('reloadCircles',function () {
						$.plusReady(function () {
							me.getMine(true);
							me.getAll(true);
						})
					})
				},
				data:{
					myCircles:[],
					allCircles:[],
					scrollMine:{},
					scrollAll:{},
					paramObj: {
						PageSize: 6,
						CurPageMine: 1,
						CurPageAll: 1,
					},
				},
				methods:{
					join: function(circleInfo,e){
//						console.log(circleInfo.joinStatus);
//						console.log(JSON.stringify(circleInfo));
						var me = this;
						e.stopPropagation();
						e.preventDefault();
						if(circleInfo.joinStatus == 0){
							ajax.post(api.circle.join,{ID: circleInfo.ID},function () {
								circleInfo.joinStatus=1;
							})
						}else if(circleInfo.joinStatus==1){
							return;
						}else if(circleInfo.joinStatus==2){
							mui.confirm("确定要退出圈子吗？","学园",["确定","取消"],function (e) {
								if(e.index === 0){
									ajax.post(api.circle.unJoin,{ID: circleInfo.ID},function () {
										circleInfo.joinStatus=0;
										me.getMine(true);
										me.getAll(true);
									})
								}
							});
						}
					},
					follow: function(circleInfo,e){
						console.log(circleInfo.followStatus);
						var me = this;
						e.stopPropagation();
						e.preventDefault();
						if(circleInfo.followStatus == 0){
							ajax.post(api.circle.follow,{ID: circleInfo.ID},function () {
								circleInfo.followStatus=1;
								me.getMine(true);
								me.getAll(true);
							})
						}else if(circleInfo.followStatus==1){
							mui.confirm("确定要取消关注吗？","学园",["确定","取消"],function (e) {
								if(e.index === 0){
									ajax.post(api.circle.unFollow,{ID: circleInfo.ID},function () {
										circleInfo.joinStatus=0;
										circleInfo.followStatus=0;
										me.getMine(true);
										me.getAll(true);
									})
								}
							});
						}
						
					},
					goCircle:function(cid){
						openPage('../circle/circle.html','circle',{cid: cid});
					},
					getMine:function(isRefresh){
						var self = this;
						var nomore = false;
						self.paramObj.CurPageMine = isRefresh?1:self.paramObj.CurPageMine+1;		// 当前页码
						
						circle.getusercirclelist({														// 请求数据
							PageSize: self.paramObj.PageSize,
							CurPage: self.paramObj.CurPageMine									// 当前页码
						}, function(data) {
							self.myCircles = isRefresh ? data:self.myCircles.concat(data); 		// 拿到数据
							nomore = data.length < self.paramObj.PageSize;
						}, function() {
							ui.clearScrollAnimal(self.scrollMine.puller,isRefresh, nomore);
						});
					},
					getAll:function(isRefresh){
						var self = this;
						var nomore = false;
						self.paramObj.CurPageAll = isRefresh?1:self.paramObj.CurPageAll+1;		// 当前页码
						
						circle.getallcirclelist({														// 请求数据
							PageSize: self.paramObj.PageSize,
							CurPage: self.paramObj.CurPageAll									// 当前页码
						}, function(data) {
							self.allCircles = isRefresh ? data:self.allCircles.concat(data); 		// 拿到数据
							nomore = data.length < self.paramObj.PageSize;
						}, function() {
							ui.clearScrollAnimal(self.scrollAll.puller,isRefresh, nomore);
						});
					},
				},
			});
		</script>
	</body>

</html>